/* color palette from <https://github.com/vuejs/theme> */
:root {
  --color-text:white;
  --color-background:black;

  --background-color-dark:#242423;
  --switch-selected-color-dark:#4F5051;
  --table-row-strip-color-dark:#373738;
  --table-row-color-dark:white;
  --table-row-hover-background-color-dark:white;
  --table-row-hover-color-dark:black;
  --plugin-explanation-background-color-dark:#1d1d1d;
  --switch-button-border-color-dark:rgba(205, 205, 205, 0.2);
  --switch-button-color-dark:white;
  --selector-color-dark:white;
  --selector-boder-focus-color-dark:rgba(205,205,205,0.2);
  --selector-border-color-dark:var(--selector-boder-focus-color-dark);
  --selector-background-color-dark: rgba(67, 69, 73, 0.5);
  --title-color-dark:white;
  --popper-background-color-dark :#343536;
  --popper-color-dark:white;
  --popper-hover-color-dark:black;
  --popper-hover-background-color-dark:white;

  --background-color-light:#f5f4f1;
  --switch-selected-color-light:#cccbc8;
  --table-row-strip-color-light:#cccbc8;
  --table-row-color-light:#1d1c1c;
  --table-row-hover-background-color-light:black;
  --table-row-hover-color-light:white;
  --plugin-explanation-background-color-light:#fffefb;
  --switch-button-border-color-light:rgba(205, 205, 205, 0.8);
  --switch-button-color-light:#1d1c1c;
  --selector-color-light:white;
  --selector-boder-focus-color-light:rgba(205,205,205,0.2);
  --selector-border-color-light:var(--selector-boder-focus-color-dark);
  --selector-background-color-light: white;
  --title-color-light:#1d1c1c;
  --popper-background-color-light :white;
  --popper-color-light:black;
  --popper-hover-color-light:white;
  --popper-hover-background-color-light:black;
}

:root[theme='dark'] {
  --background-color: var(--background-color-dark);
  --switch-selected-color: var(--switch-selected-color-dark);
  --table-row-strip-color: var(--table-row-strip-color-dark);
  --table-row-color:var(--table-row-color-dark);
  --table-row-hover-background-color: var(--table-row-hover-background-color-dark);
  --table-row-hover-color: var(--table-row-hover-color-dark);
  --plugin-explanation-background-color: var(--plugin-explanation-background-color-dark);
  --switch-button-border-color: var(--switch-button-border-color-dark);
  --switch-button-color: var(--switch-button-color-dark);
  --selector-color: var(--selector-color-dark);
  --selector-boder-focus-color: var(--selector-boder-focus-color-dark);
  --selector-border-color: var(--selector-border-color-dark);
  --selector-background-color: var(--selector-background-color-dark);
  --title-color:var(--title-color-dark);
  --checkbox-disable-color:rgb(114, 119, 128);
  --popper-background-color :var(--popper-background-color-dark);
  --popper-color:var(--popper-color-dark);
  --popper-hover-color:var(--popper-hover-color-dark);
  --popper-hover-background-color:var(--popper-hover-background-color-dark);
  --selector-color:white !important;
}

:root[theme='light'] {
  --background-color: var(--background-color-light);
  --switch-selected-color: var(--switch-selected-color-light);
  --table-row-strip-color: var(--table-row-strip-color-light);
  --table-row-color:var(--table-row-color-light);
  --table-row-hover-background-color: var(--table-row-hover-background-color-light);
  --table-row-hover-color: var(--table-row-hover-color-light);
  --plugin-explanation-background-color: var(--plugin-explanation-background-color-light);
  --switch-button-border-color: var(--switch-button-border-color-light);
  --switch-button-color: var(--switch-button-color-light);
  --selector-color: var(--selector-color-light);
  --selector-boder-focus-color: var(--selector-boder-focus-color-light);
  --selector-border-color: var(--selector-border-color-light);
  --selector-background-color: var(--selector-background-color-light);
  --title-color:var(--title-color-light);
  --checkbox-disable-color:rgb(114, 119, 128);
  --popper-background-color :var(--popper-background-color-light);
  --popper-color:var(--popper-color-light);
  --popper-hover-color:var(--popper-hover-color-light);
  --popper-hover-background-color:var(--popper-hover-background-color-light);
  --selector-color:black !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
